<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="header">
        <span>文章管理列表</span>
        <el-button @click="handleCreate" size="mini" type="primary"
          >创建</el-button
        >
      </div>
      <el-table
        v-loading="isLoading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
        stripe
        border
        :data="tableData"
        style="width: 100%"
      >
        <el-table-column prop="id" label="#" width="80" align="center">
        </el-table-column>
        <el-table-column prop="title" label="标题"> </el-table-column>
        <el-table-column prop="author" label="作者" width="100">
        </el-table-column>
        <el-table-column label="操作" width="150" align="center">
          <template slot-scope="scope">
            <el-button
              @click="handleDetail(scope.row)"
              size="mini"
              icon="el-icon-view"
              type="success"
              circle
            ></el-button>
            <el-button
              @click="handleEdit(scope.row)"
              size="mini"
              icon="el-icon-edit"
              type="primary"
              circle
            ></el-button>
            <el-button
              @click="handleDelete(scope.row)"
              size="mini"
              icon="el-icon-delete"
              type="danger"
              circle
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        layout="prev, pager, next"
        :total="1000"
      ></el-pagination>
    </el-card>
  </div>
</template>

<script>
// import axios from "axios";
import { mapState, mapActions } from "vuex";

export default {
  name: "ArticlesView",
  data() {
    return {
      isLoading: false,
      // tableData: [],
    };
  },
  computed: {
    ...mapState("article", ["tableData"]),
  },
  created() {
    this.getList();
  },
  methods: {
    ...mapActions("article", ["getListAction", "deleteArticleAction"]),
    getList() {
      // this.$store.dispatch("article/getListAction");
      this.isLoading = true;
      this.getListAction()
        .catch(() => {
          this.$notify.error({
            title: "错误",
            message: "网络错误，请重试！",
          });
        })
        .finally(() => {
          this.isLoading = false;
        });
    },
    handleDetail(row) {
      this.$router.push({
        name: "articles-detail",
        params: {
          id: row.id,
        },
      });
    },
    handleEdit(row) {
      this.$router.push({
        name: "articles-edit",
        params: {
          id: row.id,
        },
      });
    },
    handleDelete(row) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // 删除 ajax
          this.deleteArticleAction(row.id).then(() => {
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            this.getList();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    handleCreate() {
      this.$router.push({
        name: "articles-create",
      });
    },
  },
};
</script>

<style scoped lang="scss">
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>
